<!-- eslint-disable vue/multi-word-component-names -->
<template>
<!-- 购物车 -->
  <div>
    <!-- @submit="onSubmit" -->
    <van-submit-bar @submit="onSubmit" :price="total*100" button-text="提交订单" style="margin-bottom: 50px; background-color: #dfe5da;" button-color='#008000'>
      <van-checkbox v-model="checked" @click="allcheck">全选</van-checkbox>
    </van-submit-bar>
    <div style="background-color: #fafafa;">
      <van-checkbox-group v-model="result" @change="sel">
        <van-checkbox :name="item" style="margin-top:5px; margin-left:10px;" label-disabled v-for="item in cartarr" :key="item.tid">
          <van-card
            :num="item.pnum"
            :price="item.price"
            :title="item.tname"
            :thumb="item.pimg"
            style="width: 340px;"
          >
            <template #footer>
              <van-button style="width:25px; height:25px; font-size: 20px;" @click="add(item)" color="#008000" size="mini">+</van-button>
              <van-button style="width:25px; height:25px; font-size: 20px;" @click="del(item)" color="#9acd32" size="mini">-</van-button>
            </template>
          </van-card>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <div style="padding-bottom: 50px;"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 0,
      checked: false,
      cartarr: [],
      result: []
    }
  },

  // 接收父组件传递过来的参数
  props: {},

  components: {},

  // computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  computed: {
    total () {
      let total = 0
      // eslint-disable-next-line array-callback-return
      this.result.map(v => {
        total += v.price * v.pnum
      })
      return total
    }
  },

  // 页面初始化方法
  mounted () {
    this.getGwc()
  },

  // 监听方法 click事件等 ，执行drawFeatures方法
  methods: {
    getGwc () {
      this.cartarr = JSON.parse(localStorage.getItem('cartarr'))
    },
    add (v) {
      v.pnum++
      localStorage.setItem('cartarr', JSON.stringify(this.cartarr))
    },
    del (v) {
      v.pnum--
      if (v.pnum <= 0) {
        const arr = this.cartarr.filter(i => i.tid !== v.tid)
        this.cartarr = arr
      }
      localStorage.setItem('cartarr', JSON.stringify(this.cartarr))
    },
    sel () {
      if (this.cartarr.length > 0) {
        this.checked = this.result.length === this.cartarr.length
      }
    },
    allcheck () {
      this.result = this.checked ? this.cartarr : []
    },
    onSubmit () {
      if (this.total === 0) {
        return false
      }
      let params = {
        total_price: this.total
      }
      const goods = this.result.map(v => {
        delete v.pimg
        return v
      })
      params.goods = JSON.stringify(goods)
      const addr = JSON.parse(localStorage.getItem('addr'))
      if (addr) {
        params = { ...params, ...addr }
      } else {
        this.$router.push('/addr')
      }
      const newarr = this.cartarr.reduce((pre, cut) => {
        const t = this.result.some(v => v.tid === cut.tid)
        if (!t) {
          pre.push(cut)
        }
        return pre
      }, [])
      this.$api.Createorder(params).then(res => {
        if (res.data.code === 200) {
          this.cartarr = newarr
          this.result = []
          this.checked = false
          localStorage.setItem('cartarr', JSON.stringify(this.cartarr))
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
</style>
